@import './theme.css';
@import './Button.css';

.react-aria-Form {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 8px;
}

.react-aria-Form [role='alert'] {
	border: 2px solid var(--invalid-color);
	background: var(--overlay-background);
	border-radius: 6px;
	padding: 12px;
	max-width: 250px;
	outline: none;

	&:focus-visible {
		outline: 2px solid var(--focus-ring-color);
		outline-offset: 2px;
	}

	h3 {
		margin-top: 0;
	}

	p {
		margin-bottom: 0;
	}
}
